import React, { Component } from 'react';
import './index.css';
import { GetPageList, GetVideoInfo } from '../../utils/api';
import Modal from '../../components/Modal';
import Chimee from 'chimee';
import flv from 'chimee-kernel-flv';
import hls from 'chimee-kernel-hls';
import loadinglogo from '../../imgs/loading.svg';

class Home extends Component {
  state = {
    movies: [],
    PlayUrl: '',
    show: false,
    search: false,
    loading: false
  }
  componentDidMount() {
    this.listeningEvent()
  }

  getList = async () => {
    this.setState({loading: true})
    const movies = await GetPageList({ pageIndex: 1, pageSize: 100, Type: '', Channel: '', Area: "", Plot: "", Year: "2018", orderBy: 'new' });
    console.log('movies', movies)
    this.setState({ movies,loading:false })
  }
  toPlay = async (id) => {
    const videoInfo = await GetVideoInfo(id)
    const PlayUrl = videoInfo.MoviePlayUrls[0].PlayUrl
    this.setState({ PlayUrl, show: true }, () => {
      const chimee = new Chimee({
        wrapper: '#player',
        src: PlayUrl,
        controls: true,
        autoplay: true,
        kernels: {
          flv,
          hls
        }
      });
      chimee.play();
    })
  }
  renderItem = () => {
    const { movies } = this.state;
    return (
      <div>
        {
          movies.map(item => {
            return (
              <div className='movie-wrapper' onClick={() => this.toPlay(item.ID)} key={item.ID}>
                <img className='movie-img' src={item.Cover} />
                <div className='movie-footer'>
                  <p className='movie-name'>{item.Name}</p>
                  <i className='movie-tips'>{item.MovieTitle}</i>
                </div>
              </div>
            )
          })
        }
      </div>
    )
  }
  cancle = () => {
    this.setState({ show: false })
  }
  listeningEvent = (e) => {
    // ctrl + enter开启搜索
    const { search } = this.state
    const _this = this
    window.addEventListener('keypress', function (e) {
      var keyCode = e.keyCode || e.which || e.charCode;
      var ctrlKey = e.ctrlKey || e.metaKey;
      if (ctrlKey && keyCode == 13 && !search) {
        e.preventDefault();
        _this.setState({ search: true });
        return
      }
      if (ctrlKey && keyCode == 13 && search) {
        e.preventDefault();
        _this.setState({ search: false });
        return
      }
      return true;
    })

  }
  handleSearch = () => {
    this.setState({ search: true })
  }
  toSearch = async (event) => {
    if (event.keyCode == 13) {
      this.setState({loading:true})
      const movies = await GetPageList({ SearchKey: event.target.value, pageIndex: 1, pageSize: 10 });
      this.setState({ search: false, movies,loading:false })
    }
  }
  renderSearcher = () => {
    const { search } = this.state;
    return (
      search ?
        <div className='search-wrapper'>
          <div className='search'>
            <i style={{ fontSize: '30px' }}>🔍</i>
            <input type='text' autoFocus className='search-input' placeholder='影片搜索' onKeyDown={(e) => this.toSearch(e)} />
          </div>
        </div>
        : null
    )
  }
  renderPlayer = () => {
    const { show } = this.state;

    return (
      show
        ? <Modal visible={show}>
            <div className='video-wrapper'>
              <div className='video-cancle' onClick={this.cancle}>X</div>
              <div id='player' className='video-container'></div>
            </div>
          </Modal>
        : null
    )
  }
  renderLoading = () => {
    const { loading } = this.state;
    return loading? <img src={loadinglogo} className='loading'/>:null
  }
  render() {
    const {loading} = this.state
    return (
      <div className="App">
        {this.renderPlayer()}
        {this.renderItem()}
        <button onClick={this.getList}>获取电影列表</button>
        <button onClick={this.handleSearch}>搜索</button>
        {this.renderSearcher()}
        {this.renderLoading()}
      </div>
    );
  }
}

export default Home;
